<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发电预测可视化系统</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
</head>

<body>
    <div class="head clearfix">


        <h1 class="pulll_left">发电预测可视化系统</h1>
        <div class="menu menu2 pulll_left">
            <ul>
                <li><a href="index.html">首页总览</a></li>
                <li class="this"><a href="#" class="this">光伏发电</a></li>
                <li><a href="index2.html">水利发电</a></li>
                <li><a href="index3.html">环境监测</a></li>
                <li><a href="index4.html">人员概况</a></li>
                <!-- <li><a href="#">标题样式</a></li> -->


            </ul>
        </div>
        <div id="last1" style="right: 25%;background-color: #022572;">建议生成器</div>
        <div class="rili1" style="right: 22%;height: 150px;;">
            <div class="sanjiao1" style="top: -12%;">
            </div>
            <ul>
                <li style="position: relative;"><input type="text" placeholder="请输入相关问题" class="inp">
                    <div class="sencheng">
                        生成
                    </div>
                </li>
                <li>
                    <input type="text" class="inp active" disabled>
                </li>
            </ul>
            <div class="guanbi">
                ×
            </div>
        </div>
        <div class="shi"><span class="riqi"></span><br>
            <span class="shijian">12:21:16</span>
        </div>
        <div id="last">更换监测日期</div>

        <div class="rili">
            <div class="sanjiao">
            </div>
            <div class="sanjiaoxia">
            </div>
            <ul>
                <li>日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
                <li></li>
                <li class="li1">1</li>
                <li class="li1">2</li>
                <li class="li1">3</li>
                <li class="li1">4</li>
                <li class="li1">5</li>
                <li class="li1">6</li>
                <li class="li1">7</li>
                <li class="li1">8</li>
                <li class="li1">9</li>
                <li class="li1">10</li>
                <li class="li1">11</li>
                <li class="li1">12</li>
                <li class="li1">13</li>
                <li class="li1">14</li>
                <li class="li1">15</li>
                <li class="li1">16</li>
                <li class="li1">17</li>
                <li class="li1">18</li>
                <li class="li1">19</li>
                <li class="li1">20</li>
                <li class="li1">21</li>
                <li class="li1">22</li>
                <li class="li1">23</li>
                <li class="li1">24</li>
                <li class="li1">25</li>
                <li class="li1">26</li>
                <li class="li1">27</li>
                <li class="li1">28</li>
                <li class="li1">29</li>
                <li class="li1">30</li>
            </ul>
        </div>
    </div>
    <!-- <div class="main">
        <ul>
            <li class="active"><a href="#">光伏发电</a></li>
            <li><a href="index2.html">水利发电</a></li>
            <li><a href="#"></a></li>
            <li style="font-size: 35px;font-weight: 700;margin-top: 10px;">能控未来</li>
            <li><a href="权威合作"></a></li>
            <li><a href="#">联系我们</a></li>
            <li><span class="riqi"></span><br>
                <span class="shijian">12:21:16</span>
            </li>
            <li id="last">更换监测</li>
        </ul>
    </div> -->
    <div class="left">
        <div class="left1">
            <div class="fadian">
                光伏发电功率预测
            </div>
            <div class="zexian1">

            </div>
        </div>
        <div class="left1">
            <div class="fadian">
                光伏发电量
            </div>
            <div class="zexian2">

            </div>
        </div>
        <div class="left1">
            <div class="fadian">
                光伏发电影响因素
            </div>
            <div class="zexian3">

            </div>
        </div>
    </div>
    <div class="mid">
        <div class="mid1">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="images/1.png" alt=""></div>
                    <div class="swiper-slide"><img src="images/2.png" alt=""></div>
                    <div class="swiper-slide"><img src="images/3.png" alt=""></div>
                    <div class="swiper-slide"><img src="images/4.png" alt=""></div>
                    <div class="swiper-slide"><img src="images/5.png" alt=""></div>

                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
        <div class="mid2">
            <div class="midxia1">
                <div class="fadian">
                    光伏近七日检测
                </div>
                <div class="zexian11">

                </div>
            </div>
            <div class="midxia2">
                <div class="fadian">
                    光伏近七日总量
                </div>
                <div class="zexian22">
                </div>
            </div>
        </div>
    </div>
    <div class="left" style="margin-left: 1%;">
        <div class="right1">
            <div class="fadian">
                发电情况
            </div>
            <div class="zexian4">

            </div>
        </div>
        <div class="right1">
            <div class="fadian">
                发电功率比较
            </div>
            <div class="zexian5">

            </div>
        </div>
        <div class="right1">
            <div class="fadian">
                设备使用情况
            </div>
            <div class="zexian6">
                <ul>
                    <li class="sebei"><a href="#" class="sebei2">设备1（光伏）：<span
                                style="color:orange;font-size: 17px;">4884</span></a></li>
                    <li class="sebei"><a href="#" class="sebei2">设备2（光伏）：<span
                                style="color:orange;font-size: 17px;">4579</span></a></li>
                    <li class="sebei"><a href="#" class="sebei2">设备3（光伏）：<span
                                style="color:orange;font-size: 17px;">4248</span></a></li>
                    <li class="sebei"><a href="#" class="sebei2">设备4（光伏）：<span
                                style="color:orange;font-size: 17px;">4541</span></a></li>
                    <li class="sebei"><a href="#" class="sebei2">设备5（光伏）：<span
                                style="color:orange;font-size: 17px;">4824</span></a></li>
                    <li class="sebei"><a href="#" class="sebei2">设备6（光伏）：<span
                                style="color:orange;font-size: 17px;">4672</span></a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
    var left1 = echarts.init(document.querySelector('.zexian1'))
    var left2 = echarts.init(document.querySelector('.zexian2'))
    var left3 = echarts.init(document.querySelector('.zexian3'))
    var mid1 = echarts.init(document.querySelector('.zexian11'))
    var mid2 = echarts.init(document.querySelector('.zexian22'))
    var right1 = echarts.init(document.querySelector('.zexian4'))
    var right2 = echarts.init(document.querySelector('.zexian5'))
    const data1 = [1, 34, 67, 45, 62, 56, 52, 45, 12, 64, 76, 12]
    const data2 = [3, 45, 6, 26, 5, 12, 56, 2, 6, 2, 64, 78]
    const data3 = [4, 79, 73, 71, 67, 68, 108, 47, 18, 66, 140, 90]
    const data4 = [2, 39.5, 36.5, 35.5, 33.5, 34, 54, 23.5, 9, 33, 70, 45]
    const data5 = []
    const data6 = [
        ['太阳辐射量', 56],
        ['温度特性', 51],
        ['灰尘损失', 40],
        ['其他', 25]
    ]
    const data7 = [10, 2, 3, 11, 5, 7, 5]
    const data8 = [1, 3, 2, 5]
    const data11 = [11, 63, 24, 53, 34, 23, 34]
    const data22 = [16, 36, 32, 45]
    const data33 = [10, 46, 64, 12, 0, 56, 0]
    const data44 = [16, 36, 32, 45, 33, 26, 5]
    const data55 = [10, 26, 33, 11, 55, 71, 5]
    const data66 = [1, 13, 23, 51, 13, 24, 10]
    const data77 = [5.5, 19.5, 28, 31, 34, 47.5, 7.5]
    option1 = {
        // title: {
        //     text: '折线图堆叠'
        // },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            top: '3%',
            data: ['单晶硅光伏', '多晶硅光伏', '总和', '平均'],
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            top: '17%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '7', '8', '9', '10', '11', '12'],
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [
            {
                name: '单晶硅光伏',
                type: 'line',
                // stack: '总量',
                data: data1
            },
            {
                name: '多晶硅光伏',
                type: 'line',
                // stack: '总量',
                data: data2
            },
            {
                name: '总和',
                type: 'line',
                // stack: '总量',
                data: data3
            },
            {
                name: '平均',
                type: 'line',
                // stack: '总量',
                data: data4
            }
        ],
    };
    left1.setOption(option1);
    for (let i = 0; i < 4; ++i) {
        data5.push(Math.round(Math.random() * 200));
    }
    option2 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '10%',
            left: '5%',
            right: '10%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            max: 'dataMax'
        },
        yAxis: {
            type: 'category',
            data: ['设备1', '设备2', '设备3', '设备4'],
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
        },
        series: [
            {
                realtimeSort: true,
                type: 'bar',
                data: data5,
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true
                }
            }
        ],
        legend: {
            show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 2000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
    };
    function run() {
        for (var i = 0; i < data5.length; ++i) {
            if (Math.random() > 0.9) {
                data5[i] += Math.round(Math.random() * 2000);
            } else {
                data5[i] += Math.round(Math.random() * 200);
            }
        }
        left2.setOption(option2, {
            series: [
                {
                    realtimeSort: true,
                    type: 'bar',
                    data: data5,
                    label: {
                        // show: true,
                        position: 'right',
                        valueAnimation: true
                    }
                }
            ],
        });
    }
    setTimeout(function () {
        run();
    }, 0);
    setInterval(function () {
        run();
    }, 3000);
    option3 = {
        legend: {},
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source: data6,
            textStyle: {
                color: '#fff'
            }
        },
        legend: {
            show: true,
            top: '5%',
            textStyle: {
                color: '#fff'
            }
        },
        xAxis: {
            gridIndex: 0,
            show: false,
        },
        yAxis: {
            gridIndex: 0,
            show: false,
        },
        grid: { top: '55%' },
        series: [
            {
                type: 'pie',
                id: 'pie',
                radius: '40%',
                left: '-2%',
                center: ['50%', '55%'],
                emphasis: {
                    focus: 'self'
                },
                label: {
                    formatter: '{b}: {d}%',
                    color: '#fff',
                },
            }
        ]
    };
    left3.setOption(option3);
    option4 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: '#fff'
            },
            top: '5%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['三天前', '前天', '昨天', '今天', '明天', '后天', '三天后'],
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [
            {
                name: '预计产量',
                type: 'line',
                data: data7,
                lineStyle: { width: 3 }
            },
            {
                name: '实际产量',
                type: 'line',
                data: data8,
                lineStyle: { width: 3 }
            }
        ]
    };
    mid1.setOption(option4);
    option5 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: '#fff'
            },
            top: '5%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['三天前', '前天', '昨天', '今天', '明天', '后天', '三天后'],
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [
            {
                name: '预计产量',
                type: 'line',
                data: data11,
                lineStyle: { width: 3 }
            },
            {
                name: '实际产量',
                type: 'line',
                data: data22,
                lineStyle: { width: 3 }
            }
        ]
    };
    mid2.setOption(option5);
    var series = [
        {
            data: data33,
            type: 'bar',
            barWidth: 20,
            stack: 'a',
            name: '单晶硅光伏'
        },
        {
            data: data44,
            type: 'bar',
            stack: 'a',
            name: '多晶硅光伏'
        },
    ];
    const stackInfo = {};
    for (let i = 0; i < series[0].data.length; ++i) {
        for (let j = 0; j < series.length; ++j) {
            const stackName = series[j].stack;
            if (!stackName) {
                continue;
            }
            if (!stackInfo[stackName]) {
                stackInfo[stackName] = {
                    stackStart: [],
                    stackEnd: []
                };
            }
            const info = stackInfo[stackName];
            const data = series[j].data[i];
            if (data && data !== '-') {
                if (info.stackStart[i] == null) {
                    info.stackStart[i] = j;
                }
                info.stackEnd[i] = j;
            }
        }
    }
    for (let i = 0; i < series.length; ++i) {
        const data = series[i].data;
        const info = stackInfo[series[i].stack];
        for (let j = 0; j < series[i].data.length; ++j) {
            // const isStart = info.stackStart[j] === i;
            const isEnd = info.stackEnd[j] === i;
            const topBorder = isEnd ? 20 : 0;
            const bottomBorder = 0;
            data[j] = {
                value: data[j],
                itemStyle: {
                    borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
                }
            };
        }
    }
    option6 = {
        legend: {
            data: ['单晶硅光伏', '多晶硅光伏'],
            top: '5%',
            textStyle: {
                color: '#fff'
            },
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7'],
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: series
    };
    right1.setOption(option6);
    option7 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: '#fff'
            },
            top: '5%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [
            {
                name: '光伏发电',
                type: 'line',
                data: data55,
            },
            {
                name: '水利发电',
                type: 'line',
                data: data66,
            },
            {
                name: '平均发电',
                type: 'line',
                data: data77,
            }
        ]
    };
    right2.setOption(option7);
    const dianji = document.querySelectorAll('.li1')
    for (let i = 0; i < dianji.length; i++) {
        dianji[i].addEventListener('click', function () {
            data1.splice(0, 12)
            data2.splice(0, 12)
            data3.splice(0, 12)
            data4.splice(0, 12)
            data5.splice(0, 4)
            data6.splice(0, 4)
            data7.splice(0, 7)
            data8.splice(0, 4)
            data11.splice(0, 7)
            data22.splice(0, 4)
            data33.splice(0, 7)
            data44.splice(0, 7)
            data55.splice(0, 7)
            data66.splice(0, 7)
            data77.splice(0, 7)

            for (let j = 0; j < 12; j++) {
                data1.push(Math.round(Math.random() * 200));
                data2.push(Math.round(Math.random() * 200));
                data3.push((data1[j] + data2[j]))
                data4.push((data1[j] + data2[j]) / 2)
            }

            // console.log(data1);
            // console.log(data2);
            // console.log(data3);
            // console.log(data4);
            for (let i = 0; i < 4; i++) {
                data5.push(Math.round(Math.random() * 100));
                data8.push(Math.round(Math.random() * 100));
                data22.push(Math.round(Math.random() * 100));
            }
            data6.push(['太阳辐射能量', Math.round(Math.random() * 100)]);
            data6.push(['温度特性', Math.round(Math.random() * 100)]);
            data6.push(['灰尘损失', Math.round(Math.random() * 100)]);
            data6.push(['其他', Math.round(Math.random() * 100)]);
            for (let i = 0; i < 7; i++) {
                data7.push(Math.round(Math.random() * 100));

                data11.push(Math.round(Math.random() * 100));

                data33.push(Math.round(Math.random() * 200));
                data44.push(Math.round(Math.random() * 200));
                data55.push(Math.round(Math.random() * 15));
                data66.push(Math.round(Math.random() * 15));
                data77.push((data55[i] + data66[i]) / 2)
            }
            // console.log(data55);
            // console.log(data66);
            // console.log(data77);
            left1.setOption(option1);
            left2.setOption(option2);
            left3.setOption(option3);
            mid1.setOption(option4);
            mid2.setOption(option5);
            for (let i = 0; i < series[0].data.length; ++i) {
                for (let j = 0; j < series.length; ++j) {
                    const stackName = series[j].stack;
                    if (!stackName) {
                        continue;
                    }
                    if (!stackInfo[stackName]) {
                        stackInfo[stackName] = {
                            stackStart: [],
                            stackEnd: []
                        };
                    }
                    const info = stackInfo[stackName];
                    const data = series[j].data[i];
                    if (data && data !== '-') {
                        if (info.stackStart[i] == null) {
                            info.stackStart[i] = j;
                        }
                        info.stackEnd[i] = j;
                    }
                }
            }
            for (let i = 0; i < series.length; ++i) {
                const data = series[i].data;
                const info = stackInfo[series[i].stack];
                for (let j = 0; j < series[i].data.length; ++j) {
                    // const isStart = info.stackStart[j] === i;
                    const isEnd = info.stackEnd[j] === i;
                    const topBorder = isEnd ? 20 : 0;
                    const bottomBorder = 0;
                    data[j] = {
                        value: data[j],
                        itemStyle: {
                            borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
                        }
                    };
                }
            }
            right1.setOption(option6);
            right2.setOption(option7);
        })
    }
    const sencheng = document.querySelector('.sencheng')

    const inp = document.querySelector('.inp')

    const active = document.querySelector('.active')
    const dianwo = document.querySelector('#last1')
    const jianyi = document.querySelector('.rili1')
    const guanbi = document.querySelector('.guanbi')
    dianwo.addEventListener('click', function () {
        jianyi.style.display = 'block'

    })
    guanbi.addEventListener('click', function () {
        jianyi.style.display = 'none'
        active.style.display = 'none'
        inp.value = ''
        // console.log(11);

    })
    sencheng.addEventListener('click', () => {
        if (inp.value == '') {
            alert('请输入问题')
        }
        else if (inp.value == '发电量过多') {
            active.value = '请关闭太阳能展板'
            active.style.display = 'block'
        }
        else if (inp.value == '发电量过少') {
            active.value = '请打开太阳能展板'
            active.style.display = 'block'
        } else {
            alert('抱歉，这个问题有点难呢')
            inp.value = ''
        }
    })
</script>

</html>